import { computed, nextTick, ref } from "vue"
// @ts-ignore
import { DeleteVHuManApi, GetVHuManListApi } from "@/api/vhuman"
import { ModelFormProps } from "@/components/Create/components/dialogDigitalPeople.vue"
import debounce from "@/utils/debounce"
import { ElMessage, ElMessageBox } from "element-plus"

export interface PaginationProps {
    page: number
    pageSize: number
    count: number
}

export interface DigitalListProps {
    id: number;
    user_id: number;
    robot_id: number;
    model_id: number;
    nickname: string;
    avatar: string;
    info: string;
    createtime: number;
    status: string;
    admin_nickname: string;
    admin_avatar: string;
    model_name: string;
    model_url: string;
}

const PAGE_SIZE = 20
export default function useModelList() {
    const pagination = ref<PaginationProps>({
        page: 1,
        pageSize: 0,
        count: 0
    })
    const loading = ref<boolean>(false)
    const immediate = ref<boolean>(false)
    const visible = ref<boolean>(false)
    const digitalRef = ref<any>(null)
    const robotId = ref<number>(120)
    const editData = ref<ModelFormProps>()
    const digitalList = ref<DigitalListProps[]>([])

    // 页数
    const pageCount = computed(() => {
        return Math.ceil(pagination.value.count / PAGE_SIZE)
    })

    const initModelList = async (type: 'init' | 'scroll') => {
        loading.value = true
        try {
            const { data } = await GetVHuManListApi({ page: type === 'init' ? 1 : pagination.value.page })
            pagination.value.count = data.count // 总数
            // 链接上一次的数据源
            if (type === 'init') {
                digitalList.value = [].concat(data.list)
            } else if (type === 'scroll') {
                digitalList.value = digitalList.value.concat(data.list)
            } else {
                digitalList.value = []
            }
            nextTick(handleScrollToBottom)
        } catch (error) {
            console.error(error)
        } finally {
            loading.value = false
        }
    }


    const handleScrollToBottom = () => {
        const chatMessageDom = digitalRef.value as HTMLDivElement
        if (chatMessageDom) {
            nextTick(() => {
                chatMessageDom.scrollTop = chatMessageDom.scrollHeight
            })
        }
    }

    // 编辑回显
    const handleEditDpData = debounce((item: DigitalListProps) => {
        editData.value = {
            avatar: item.avatar,
            nickname: item.nickname,
            robot_id: item.robot_id,
            model_id: Number(item.model_id),
            info: item.info,
            id: item.id,
            // @ts-ignore
            isShowAvatar: true
        }
        visible.value = true
    }, 300)

    const handleClose = (type: string) => {
        visible.value = false
        if (type) {
            initModelList('init')
        }
    }

    // 删除
    const handleDeleteId = debounce(async (id: number) => {
        ElMessageBox.confirm("相关数字人模型将永久删除，请谨慎操作！是否继续删除？", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        })
            .then(async () => {
                await DeleteVHuManApi({ id })
                digitalList.value = digitalList.value.filter((item) => item.id !== id)
                ElMessage.success("删除成功")
            })
            .catch((error: any) => {
                console.error(error)
            })
    }, 300)

    // 下一页
    const nextPage = debounce(() => {
        if (pagination.value.page >= pageCount.value) return
        immediate.value = true
        pagination.value.page += 1
        initModelList('scroll')
    }, 200)

    return {
        loading,
        immediate,
        pageCount,
        pagination,
        digitalRef,
        digitalList,
        robotId,
        visible,
        editData,
        handleScrollToBottom,
        initModelList,
        handleEditDpData,
        handleClose,
        handleDeleteId,
        nextPage
    }
}
